<template>
  <view class="container">
    <view class="remote-control">
      <!-- 上按钮 -->
      <view 
        class="control-btn up-btn" 
        :class="{'active': btnActive.up}"
        @touchstart="handleTouchStart('up')"
        @touchend="handleTouchEnd('up')"
        @click="handleDirectionClick('up')"
      >
		上
	  </view>
      
      <!-- 左右按钮和中间语音按钮 -->
      <view class="middle-row">
        <view 
          class="control-btn left-btn" 
          :class="{'active': btnActive.left}"
          @touchstart="handleTouchStart('left')"
          @touchend="handleTouchEnd('left')"
          @click="handleDirectionClick('left')"
        > 
			左
		</view>
        
        <view 
          class="voice-btn" 
          @touchstart="startVoiceInput"
          @touchend="stopVoiceInput"
          :class="{'recording': isRecording}"
        >
          <text v-if="!isRecording">语音</text>
          <text v-else class="recording-text">录制中...</text>
          <view class="voice-wave" v-if="isRecording">
            <view class="wave" v-for="(item, index) in waves" :key="index" :style="{height: item + 'px'}"></view>
          </view>
        </view>
        
        <view 
          class="control-btn right-btn" 
          :class="{'active': btnActive.right}"
          @touchstart="handleTouchStart('right')"
          @touchend="handleTouchEnd('right')"
          @click="handleDirectionClick('right')"
        >
			右
		</view>
      </view>
      
      <!-- 下按钮 -->
      <view 
        class="control-btn down-btn" 
        :class="{'active': btnActive.down}"
        @touchstart="handleTouchStart('down')"
        @touchend="handleTouchEnd('down')"
        @click="handleDirectionClick('down')"
      >
		下
	  </view>
    </view>
    
    <!-- 语音识别结果 -->
    <view class="voice-result" v-if="voiceResult">
      <text>识别结果: {{voiceResult}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnActive: {
        up: false,
        down: false,
        left: false,
        right: false
      },
      isRecording: false,
      voiceResult: '',
      waves: [],
      waveInterval: null
    }
  },
  methods: {
    // 方向按钮按下效果
    handleTouchStart(direction) {
      this.btnActive[direction] = true;
    },
    
    // 方向按钮释放效果
    handleTouchEnd(direction) {
      this.btnActive[direction] = false;
    },
    
    // 方向按钮点击事件
    handleDirectionClick(direction) {
      uni.showToast({
        title: `点击了${this.getDirectionName(direction)}按钮`,
        icon: 'none'
      });
      // 这里可以添加实际的业务逻辑
    },
    
    // 获取方向名称
    getDirectionName(direction) {
      const map = {
        up: '上',
        down: '下',
        left: '左',
        right: '右'
      };
      return map[direction];
    },
    
    // 开始语音输入
    startVoiceInput() {
      this.isRecording = true;
      this.startWaveAnimation();
      
      // 调用uni-app的语音识别API
      uni.startRecord({
        success: (res) => {
          this.voiceResult = '语音识别中...';
          // 实际开发中这里应该是调用语音识别服务
          // 模拟识别过程
          setTimeout(() => {
            this.voiceResult = '这是语音识别的结果';
          }, 2000);
        },
        fail: (err) => {
          console.error('录音失败:', err);
          uni.showToast({
            title: '录音失败',
            icon: 'none'
          });
          this.isRecording = false;
          this.stopWaveAnimation();
        }
      });
    },
    
    // 停止语音输入
    stopVoiceInput() {
      uni.stopRecord();
      this.isRecording = false;
      this.stopWaveAnimation();
    },
    
    // 开始声波动画
    startWaveAnimation() {
      this.waves = [5, 10, 15, 10, 5];
      this.waveInterval = setInterval(() => {
        this.waves = this.waves.map(() => Math.floor(Math.random() * 15) + 5);
      }, 200);
    },
    
    // 停止声波动画
    stopWaveAnimation() {
      if (this.waveInterval) {
        clearInterval(this.waveInterval);
        this.waveInterval = null;
      }
      this.waves = [];
    }
  },
  
  beforeDestroy() {
    this.stopWaveAnimation();
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.remote-control {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: #333; */
  border-radius: 50px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.control-btn {
  width: 80px;
  height: 80px;
  background-color: #f4f4f4;
  color: #007aff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.2s;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.control-btn:active, .control-btn.active {
  transform: scale(0.95);
  background-color: rgba(137, 207, 240,0.3);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.up-btn {
  margin-bottom: 10px;
}

.down-btn {
  margin-top: 10px;
}

.middle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}

.left-btn {
  margin-right: 10px;
}

.right-btn {
  margin-left: 10px;
}

.voice-btn {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
  color: #007aff;
  font-size: 20px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.voice-btn:active, .voice-btn.recording {
  background-color: #f44336;
  color: white;
  transform: scale(0.98);
}

.recording-text {
  font-size: 16px;
  margin-bottom: 5px;
}

.voice-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 30px;
  margin-top: 5px;
}

.wave {
  width: 4px;
  background-color: white;
  margin: 0 2px;
  border-radius: 2px;
  transition: height 0.2s;
}

.voice-result {
  margin-top: 30px;
  padding: 15px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 80%;
  text-align: center;
}
</style>